.card {
    width: 48%;
    float: left;
    overflow: hidden;
    height: 200px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    margin: 1%;
    position: relative;
    cursor: pointer;
    .box,.layer{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .layer{
      background-color: rgba(0,0,0,0.8);
      color: #fff;
        opacity: 0;
      .text{
        width: 90%;
        // height: 90%;
        margin-top: 5%;
        margin-left: 5%;
        line-height: 18px;
        font-size: 14px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 8;
        -webkit-box-orient: vertical;
      }
      &:hover{
      opacity: 1;
      }
    }
    .imgBox {
        margin-top: 25px;
        margin-left: 25px;
        width: 150px;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
        float: left;
        img {
            width: 100%;
        }
    }
    h3 {
        width: calc(100% - 250px);
        margin-left: 200px;
        margin-top: 30px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .tags {
      position: absolute;
      left: 200px;
      width: calc(100% - 250px);
      bottom: 25px;
    }
}
@media screen and (min-width: 1400px) {
.card{
  width: 31%;
}
}
